class Board {
    canvas = document.getElementsByTagName("canvas")[0];
    width = 50;
    height = 50;
    distance = 5;

    init = function (view) {
        this.backgrounds();
        this.rects();
        this.rows();
        this.cols();
        this.bias();
        this.centers();
        this.texts();
        this.numbers(view);
    };

    line = function (x1, y1, x2, y2, color, lineWidth) {
        let context = this.canvas.getContext("2d");
        context.strokeStyle = color;
        context.lineWidth = lineWidth;
        context.beginPath();
        context.moveTo(y1 * this.width, x1 * this.height);
        context.lineTo(y2 * this.width, x2 * this.height);
        context.stroke();
        context.closePath();
    };

    rows = function () {
        let context = this.canvas.getContext("2d");
        context.translate(this.width, this.height);
        context.beginPath();
        for (let i = 0; i < 10; i++) {
            this.line(i, 0, i, 8, "black", 1);
        }
        context.closePath();
        context.translate(-this.width, -this.height);
    };

    cols = function () {
        let context = this.canvas.getContext("2d");
        context.translate(this.width, this.height);
        context.beginPath();
        for (let i = 0; i < 9; i++) {
            this.line(0, i, 4, i, "black", 1);
            this.line(5, i, 9, i, "black", 1);
        }
        this.line(4, 0, 5, 0, "black", 1);
        this.line(4, 8, 5, 8, "black", 1);
        context.closePath();
        context.translate(-this.width, -this.height);
    };

    bias = function () {
        let context = this.canvas.getContext("2d");
        context.translate(this.width, this.height);
        context.beginPath();
        this.line(0, 3, 2, 5, "black", 1);
        this.line(0, 5, 2, 3, "black", 1);
        this.line(7, 3, 9, 5, "black", 1);
        this.line(9, 3, 7, 5, "black", 1);
        context.closePath();
        context.translate(-this.width, -this.height);
    };

    backgrounds = function () {
        let context = this.canvas.getContext("2d");
        context.beginPath();
        context.fillStyle = "LightGray";
        context.fillRect(0, 0, this.width * 10, this.height * 11);
        context.fill();
        context.closePath();
    };

    center = function (x, y, color, lineWidth) {
        let context = this.canvas.getContext("2d");
        context.strokeStyle = color;
        context.lineWidth = lineWidth;
        let left = y * this.width;
        let top = x * this.height;
        if (y < 8) {
            context.beginPath();
            context.moveTo(left + this.distance, top - this.distance);
            context.lineTo(left + this.distance, top - this.distance * 3);
            context.stroke();
            context.closePath();
            context.beginPath();
            context.moveTo(left + this.distance, top - this.distance);
            context.lineTo(left + this.distance * 3, top - this.distance);
            context.stroke();
            context.closePath();
            context.beginPath();
            context.moveTo(left + this.distance, top + this.distance);
            context.lineTo(left + this.distance, top + this.distance * 3);
            context.stroke();
            context.closePath();
            context.beginPath();
            context.moveTo(left + this.distance, top + this.distance);
            context.lineTo(left + this.distance * 3, top + this.distance);
            context.stroke();
            context.closePath();
        }
        if (y > 0) {
            context.beginPath();
            context.moveTo(left - this.distance, top - this.distance);
            context.lineTo(left - this.distance, top - this.distance * 3);
            context.stroke();
            context.closePath();
            context.beginPath();
            context.moveTo(left - this.distance, top - this.distance);
            context.lineTo(left - this.distance * 3, top - this.distance);
            context.stroke();
            context.closePath();
            context.beginPath();
            context.moveTo(left - this.distance, top + this.distance);
            context.lineTo(left - this.distance, top + this.distance * 3);
            context.stroke();
            context.closePath();
            context.beginPath();
            context.moveTo(left - this.distance, top + this.distance);
            context.lineTo(left - this.distance * 3, top + this.distance);
            context.stroke();
            context.closePath();
        }
    };

    centers = function () {
        let context = this.canvas.getContext("2d");
        context.translate(this.width, this.height);
        this.center(3, 0, "black", 1);
        this.center(3, 2, "black", 1);
        this.center(3, 4, "black", 1);
        this.center(3, 6, "black", 1);
        this.center(3, 8, "black", 1);
        this.center(2, 1, "black", 1);
        this.center(2, 7, "black", 1);
        this.center(6, 0, "black", 1);
        this.center(6, 2, "black", 1);
        this.center(6, 4, "black", 1);
        this.center(6, 6, "black", 1);
        this.center(6, 8, "black", 1);
        this.center(7, 1, "black", 1);
        this.center(7, 7, "black", 1);
        context.translate(-this.width, -this.height);
    };

    rects = function () {
        let context = this.canvas.getContext("2d");
        context.translate(this.width, this.height);
        context.beginPath();
        context.strokeStyle = "black";
        context.lineWidth = 3;
        context.strokeRect(-this.distance, -this.distance, this.width * 8 + this.distance * 2, this.height * 9 +
            this.distance * 2);
        context.stroke();
        context.closePath();
        context.translate(-this.width, -this.height);
    };

    texts = function () {
        let context = this.canvas.getContext("2d");
        context.translate(this.width, this.height);
        context.beginPath();
        context.fillStyle = "black";
        context.font = "28px '楷体' ";
        context.textBaseline = "middle";
        context.textAlign = "center";
        context.fillText("楚 河", this.width * 2, this.height * 4.5, this.width * 2);
        context.fillText("汉 界", this.width * 6, this.height * 4.5, this.width * 2);
        context.fill();
        context.closePath();
        context.translate(-this.width, -this.height);
    };

    piece = function (x, y, color, name, view) {
        if (view == "black") {
            x = 9 - x;
            y = 8 - y;
        }
        let context = this.canvas.getContext("2d");
        context.translate(this.width, this.height);
        context.beginPath();
        context.fillStyle = "gray";
        context.arc(y * this.width, x * this.height, Math.min(this.width, this.height) / 2 - 2, 0, Math.PI * 2);
        context.fill();
        context.closePath();
        context.beginPath();
        context.fillStyle = color;
        context.arc(y * this.width, x * this.height, Math.min(this.width, this.height) / 2 - 5, 0, Math.PI * 2);
        context.fill();
        context.beginPath();
        context.fillStyle = "AliceBlue";
        context.font = "28px 楷体 ";
        context.textBaseline = "middle";
        context.textAlign = "center";
        context.fillText(name, y * this.width, x * this.height, Math.min(this.width, this.height));
        context.closePath();
        context.translate(-this.width, -this.height);
    };

    pieces = function (pieces, view) {
        for (let i = 0; i < pieces.length; i++) {
            let piece = pieces[i];
            this.piece(piece.x, piece.y, piece.color, piece.name, view);
        }
    };

    numbers = function (view) {
        let context = this.canvas.getContext("2d");
        let numberRed = "一二三四五六七八九";
        let numberBlack = "123456789";
        context.beginPath();
        context.fillStyle = "black";
        context.font = "18px 楷体";
        context.textBaseline = "middle";
        context.textAlign = "center";
        if (view == "black") {
            for (let i = 0; i < 9; i++) {
                context.fillText(numberRed[i], (i + 1) * this.width, this.height / 2);
                context.fillText(numberBlack[8 - i], (i + 1) * this.width, this.height * 10.5);
            }
        } else {
            for (let i = 0; i < 9; i++) {
                context.fillText(numberBlack[i], (i + 1) * this.width, this.height / 2);
                context.fillText(numberRed[8 - i], (i + 1) * this.width, this.height * 10.5);
            }
        }
        context.closePath();
    };

    select = function (x, y, view) {
        if (view == "black") {
            x = 9 - x;
            y = 8 - y;
        }
        let context = this.canvas.getContext("2d");
        context.translate(this.width, this.height);
        let left = y * this.width;
        let top = x * this.height;
        context.beginPath()
        context.lineWidth = 2;
        context.strokeStyle = "blue";
        context.moveTo(left - this.width / 2 + 2, top - this.height / 2 + 2);
        context.lineTo(left - this.width / 2 + 2 + this.distance * 2, top - this.height / 2 + 2);
        context.moveTo(left - this.width / 2 + 2, top - this.height / 2 + 2);
        context.lineTo(left - this.width / 2 + 2, top - this.height / 2 + this.distance * 2 + 2);
        context.moveTo(left - this.width / 2 + 2, top + this.height / 2 - 2);
        context.lineTo(left - this.width / 2 + 2 + this.distance * 2, top + this.height / 2 - 2);
        context.moveTo(left - this.width / 2 + 2, top + this.height / 2 - 2);
        context.lineTo(left - this.width / 2 + 2, top + this.height / 2 - this.distance * 2 - 2);
        context.moveTo(left + this.width / 2 - 2, top + this.height / 2 - 2);
        context.lineTo(left + this.width / 2 - 2 - this.distance * 2, top + this.height / 2 - 2);
        context.moveTo(left + this.width / 2 - 2, top - this.height / 2 + 2);
        context.lineTo(left + this.width / 2 - 2, top - this.height / 2 + this.distance * 2 + 2);
        context.moveTo(left + this.width / 2 - 2, top - this.height / 2 + 2);
        context.lineTo(left + this.width / 2 - 2 - this.distance * 2, top - this.height / 2 + 2);
        context.moveTo(left + this.width / 2 - 2, top + this.height / 2 - 2);
        context.lineTo(left + this.width / 2 - 2, top + this.height / 2 - this.distance * 2 - 2);
        context.stroke();
        context.closePath();
        context.translate(-this.width, -this.height);
    };

    selects = function (selects, view) {
        for (let i = 0; i < selects.length; i++) {
            let select = selects[i];
            this.select(select.x, select.y, view);
        }
    };

    may = function (x, y, view) {
        if (view == "black") {
            x = 9 - x;
            y = 8 - y;
        }
        let context = this.canvas.getContext("2d");
        context.translate(this.width, this.height);
        let left = y * this.width;
        let top = x * this.height;
        context.beginPath()
        context.lineWidth = 2;
        context.strokeStyle = "green";
        context.moveTo(left - this.width / 2 + 2, top - this.height / 2 + 2);
        context.lineTo(left - this.width / 2 + 2 + this.distance * 2, top - this.height / 2 + 2);
        context.moveTo(left - this.width / 2 + 2, top - this.height / 2 + 2);
        context.lineTo(left - this.width / 2 + 2, top - this.height / 2 + this.distance * 2 + 2);
        context.moveTo(left - this.width / 2 + 2, top + this.height / 2 - 2);
        context.lineTo(left - this.width / 2 + 2 + this.distance * 2, top + this.height / 2 - 2);
        context.moveTo(left - this.width / 2 + 2, top + this.height / 2 - 2);
        context.lineTo(left - this.width / 2 + 2, top + this.height / 2 - this.distance * 2 - 2);
        context.moveTo(left + this.width / 2 - 2, top + this.height / 2 - 2);
        context.lineTo(left + this.width / 2 - 2 - this.distance * 2, top + this.height / 2 - 2);
        context.moveTo(left + this.width / 2 - 2, top - this.height / 2 + 2);
        context.lineTo(left + this.width / 2 - 2, top - this.height / 2 + this.distance * 2 + 2);
        context.moveTo(left + this.width / 2 - 2, top - this.height / 2 + 2);
        context.lineTo(left + this.width / 2 - 2 - this.distance * 2, top - this.height / 2 + 2);
        context.moveTo(left + this.width / 2 - 2, top + this.height / 2 - 2);
        context.lineTo(left + this.width / 2 - 2, top + this.height / 2 - this.distance * 2 - 2);
        context.stroke();
        context.closePath();
        context.translate(-this.width, -this.height);
    };
    mays = function (mays, view) {
        for (let i = 0; i < mays.length; i++) {
            let may = mays[i];
            this.may(may.x, may.y, view);
        }
    };
}
